import React from "react"
import queryString from 'query-string'
import { Carousel, WingBlank, Tabs, WhiteSpace } from 'antd-mobile';
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Gedancss from "./style/index.module.css"
import img1 from "./img/返回1.png"
// import $ from "./js/index"
const tabs = [
    { title: '推荐' },
    { title: '官方' },
    { title: '精品' },
    { title: '华语' },
    { title: '流行' },
    { title: '民谣' },
    { title: '电子' },
    { title: '轻音乐' },
    { title: '未开放' },
];
class Gedan extends React.Component {
    state = {
        data: [
            "KRlazN4B32tTXH2CuQobGA==/109951164500608286",
            "2yh7rSB7vmJH06cr4GWAIg==/109951164500585257"
            , "LAQvfszxItqNJRrgeGt6Xw==/109951164500598472"],
        imgHeight: 176,
        zhoumozuanyong: [],
        zhoumozuanyong1: [],
        zhoumozuanyong2: [],
        zhoumozuanyong3: [],
        zhoumozuanyong4: [],
        zhoumozuanyong5: [],
        zhoumozuanyong6: [],
    }
    img1fanhui() {
        // this.props.history.goBack()
        this.props.history.push("/gen/Find")
    }
    componentWillMount() {
        fetch('http://106.12.79.128:666/top/artists?limit=15')//听歌打卡接口
            .then(body => body.json())
            .then(res => {
                // console.log(res.artists[0])
                this.setState({
                    zhoumozuanyong: res.artists
                })
            })
        fetch('http://106.12.79.128:666/top/playlist?limit=18&order=官方')
            .then(body => body.json())
            .then(res => {
                // for (var i = 16; i < 9; i++) {
                //     (this.state.zhoumozuanyong1).push(res.artists[i])
                //     this.setState({
                //         // listgedan: res.playlist.tracks[i]
                //     })
                // }
                console.log(res.playlists[0].id);
                console.log(res.playlists[0].description);
                console.log(res.playlists[0].coverImgUrl);
                console.log(res.playlists[0].trackCount);
                console.log(res.playlists[1]);
                this.setState({
                    zhoumozuanyong1: res.playlists
                })
            })
        fetch('http://106.12.79.128:666/top/playlist?limit=36&order=官方')
            .then(body => body.json())
            .then(res => {
                for (var i = 18; i < 36; i++) {
                    (this.state.zhoumozuanyong2).push(res.playlists[i])
                    this.setState({
                    })
                }
            })
        fetch('http://106.12.79.128:666/top/playlist?limit=54&order=官方')
            .then(body => body.json())
            .then(res => {
                for (var i = 37; i < 54; i++) {
                    (this.state.zhoumozuanyong3).push(res.playlists[i])
                    this.setState({
                    })
                }
            })
        fetch('http://106.12.79.128:666/top/playlist?limit=72&order=官方')
            .then(body => body.json())
            .then(res => {
                for (var i = 54; i < 72; i++) {
                    (this.state.zhoumozuanyong4).push(res.playlists[i])
                    this.setState({
                    })
                }
            })
        fetch('http://106.12.79.128:666/top/playlist?limit=90&order=官方')
            .then(body => body.json())
            .then(res => {
                for (var i = 72; i < 90; i++) {
                    (this.state.zhoumozuanyong5).push(res.playlists[i])
                    this.setState({
                    })
                }
            })
        fetch('http://106.12.79.128:666/top/artists?limit=36')
            .then(body => body.json())
            .then(res => {
                for (var i = 18; i < 36; i++) {
                    (this.state.zhoumozuanyong6).push(res.artists[i])
                    this.setState({
                    })
                }
            })
            
    }
    jump(playlistid) {
        const id = this.props.location.id
        this.props.history.push({ pathname: "/Findplaylist", playlistid, id });
    }
    render() {
        let { zhoumozuanyong, zhoumozuanyong1, zhoumozuanyong2, zhoumozuanyong3, zhoumozuanyong4
            , zhoumozuanyong5, zhoumozuanyong6 } = this.state
        return (
            <div>
                <div>
                    <img onClick={this.img1fanhui.bind(this)} className={Gedancss.img1} src={img1} alt="" />
                    <span className={Gedancss.divspan1}>歌单广场</span>
                </div>
                <div>
                    <WhiteSpace />
                    <Tabs tabs={tabs} initialPage={0} animated={true} useOnPan={true} >
                        {/* -----------------------------------推荐--------------------------------------------- */}
                        {/* -----------------------------------轮播图--------------------------------------------- */}
                        <WingBlank>
                            <Carousel
                                autoplay
                                infinite
                            >
                                {this.state.data.map(item => (
                                    <a
                                        key={item}
                                        href="http://www.alipay.com"//跳转到图片地址
                                        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                    >
                                        <img
                                            src={`http://p1.music.126.net/${item}.jpg?imageView&quality=89`}
                                            alt=""
                                            style={{ width: '100%', verticalAlign: 'top', borderRadius: '6px' }}
                                            onLoad={() => {
                                                // fire window resize event to change height
                                                window.dispatchEvent(new Event('resize'));
                                                this.setState({ imgHeight: 'auto' });
                                            }}
                                        />
                                    </a>
                                ))}
                            </Carousel>
                            {/* -----------------------------------列表推荐音乐--------------------------------------------- */}
                            <div>
                                <div>
                                    <div className={Gedancss.Litemdiv}>
                                        <ul>
                                            {
                                                zhoumozuanyong.map(item =>
                                                    <li className={Gedancss.Litemli} key={item.id}>
                                                        {/* <a className={Gedancss.Litema} href="#"> */}
                                                            {/* <img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" /> */}
                                                            <img onClick={this.jump.bind(this, item.id)} id={Gedancss.Litemimg} src={item.picUrl} alt="" />
                                                            <span className={Gedancss.Litemspan}>▷{item.musicSize}
                                                                <b className={Gedancss.Litemb}>万</b>
                                                            </span>
                                                            <p className={Gedancss.Litemp}>{item.name}</p>
                                                        {/* </a> */}
                                                    </li>
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </WingBlank>
                        {/* -----------------------------------列表官方音乐--------------------------------------------- */}
                        <div>
                            <div>
                                <div className={Gedancss.Litemdiv}>
                                    <ul>
                                        {
                                        zhoumozuanyong1.map(item =>
                                            <li className={Gedancss.Litemli} key={item.id}>
                                                {/* <a className={Gedancss.Litema} href="#"> */}
                                                    {/* <img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" /> */}
                                                    <img onClick={this.jump.bind(this, item.id)} id={Gedancss.Litemimg} src={item.coverImgUrl} alt="" />
                                                    <span className={Gedancss.Litemspan}>▷{item.trackCount}
                                                        <b className={Gedancss.Litemb}>万</b>
                                                    </span>
                                                    <p className={Gedancss.Litemp}>{item.description}</p>
                                                {/* </a> */}
                                            </li>
                                        )
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {/* -----------------------------------列表精品音乐--------------------------------------------- */}
                        <div>
                            <div>
                                <div className={Gedancss.Litemdiv}>
                                    <ul>
                                        {
                                            zhoumozuanyong2.map(item =>
                                                <li className={Gedancss.Litemli} key={item.id}>
                                                    {/* <a className={Gedancss.Litema} href="#"> */}
                                                        {/* <img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" /> */}
                                                        <img onClick={this.jump.bind(this, item.id)} id={Gedancss.Litemimg} src={item.coverImgUrl} alt="" />
                                                        <span className={Gedancss.Litemspan}>▷{item.trackCount}
                                                            <b className={Gedancss.Litemb}>万</b>
                                                        </span>
                                                        <p className={Gedancss.Litemp}>{(item.description == "") ? "占无数据支持,敬请期待后续链接中。。" : item.description}</p>
                                                    {/* </a> */}
                                                </li>
                                            )
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {/* -----------------------------------列表华语音乐--------------------------------------------- */}
                        <div>
                            <div>
                                <div className={Gedancss.Litemdiv}>
                                    <ul>
                                        {
                                            zhoumozuanyong3.map(item =>
                                                <li className={Gedancss.Litemli} key={item.id}>
                                                    {/* <a className={Gedancss.Litema} href="#"> */}
                                                        {/* <img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" /> */}
                                                        <img onClick={this.jump.bind(this, item.id)}  id={Gedancss.Litemimg} src={item.coverImgUrl} alt="" />
                                                        <span className={Gedancss.Litemspan}>▷{item.trackCount}
                                                            <b className={Gedancss.Litemb}>万</b>
                                                        </span>
                                                        <p className={Gedancss.Litemp}>{(item.description == "") ? "占无数据支持,敬请期待后续链接中。。" : item.description}</p>
                                                    {/* </a> */}
                                                </li>
                                            )
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {/* -----------------------------------列表流行音乐--------------------------------------------- */}
                        <div>
                            <div>
                                <div className={Gedancss.Litemdiv}>
                                    <ul>
                                        {
                                            zhoumozuanyong4.map(item =>
                                                <li className={Gedancss.Litemli} key={item.id}>
                                                    {/* <a className={Gedancss.Litema} href="#"> */}
                                                        {/* <img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" /> */}
                                                        <img onClick={this.jump.bind(this, item.id)} id={Gedancss.Litemimg} src={item.coverImgUrl} alt="" />
                                                        <span className={Gedancss.Litemspan}>▷{item.trackCount}
                                                            <b className={Gedancss.Litemb}>万</b>
                                                        </span>
                                                        <p className={Gedancss.Litemp}>{(item.description == "") ? "占无数据支持,敬请期待后续链接中。。" : item.description}</p>
                                                    {/* </a> */}
                                                </li>
                                            )
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {/* -----------------------------------列表民谣音乐--------------------------------------------- */}
                        <div>
                            <div>
                                <div className={Gedancss.Litemdiv}>
                                    <ul>
                                        {
                                            zhoumozuanyong5.map(item =>
                                                <li className={Gedancss.Litemli} key={item.id}>
                                                    {/* <a className={Gedancss.Litema} href="#"> */}
                                                        {/* <img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" /> */}
                                                        <img onClick={this.jump.bind(this, item.id)} id={Gedancss.Litemimg} src={item.coverImgUrl} alt="" />
                                                        <span className={Gedancss.Litemspan}>▷{item.trackCount}
                                                            <b className={Gedancss.Litemb}>万</b>
                                                        </span>
                                                        <p className={Gedancss.Litemp}>{(item.description == "") ? "占无数据支持,敬请期待后续链接中。。" : item.description}</p>
                                                    {/* </a> */}
                                                </li>
                                            )
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {/* -----------------------------------列表电子音乐--------------------------------------------- */}
                        <div>
                                <div>
                                    <div className={Gedancss.Litemdiv}>
                                        <ul>
                                            {
                                                zhoumozuanyong.map(item =>
                                                    <li className={Gedancss.Litemli} key={item.id}>
                                                        {/* <a className={Gedancss.Litema} href="#"> */}
                                                            {/* <img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" /> */}
                                                            <img onClick={this.jump.bind(this, item.id)} id={Gedancss.Litemimg} src={item.picUrl} alt="" />
                                                            <span className={Gedancss.Litemspan}>▷{item.musicSize}
                                                                <b className={Gedancss.Litemb}>万</b>
                                                            </span>
                                                            <p className={Gedancss.Litemp}>{item.name}</p>
                                                        {/* </a> */}
                                                    </li>
                                                )
                                            }
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        <div style={{
                            display: 'flex', alignItems: 'center',
                            justifyContent: 'center', height: '170px', backgroundColor: '#fff'
                        }}>
                            1
                        </div>
                    </Tabs>
                    <WhiteSpace />
                </div>
            </div>
        )
    }
}
//  <script  src="../src/pages/Find/每日推荐/歌单/js/jquery-1.8.3.min.js"></script>

export default Gedan